<script lang="ts" setup>
const cm = useColorMode();
const presetColorModesMapping = {
  0: "light",
  1: "dark",
  // system = 2,
} as const;
const refToggle = computed(() => {
  // 因为非dark有两种,所以不能直接判断是否等于dark,
  return cm.value === "dark";
});
</script>

<template>
  <!-- Avatar... -->
  <Gavatar />
  <!-- 夜间模式 -->
  <ClientOnly>
    <UToggle
      off-icon="i-ph:sun-bold"
      on-icon="i-ph:moon-bold"
      :model-value="refToggle"
      class="dark:bg-zinc-700"
      :ui="{
        icons: {
          active: tw`dark:bg-gray-600 rounded-full`.join(' '),
          dynamic: true,
        },
      }"
      @update:model-value="
        (v: boolean) => {
          $colorMode.value = presetColorModesMapping[v ? 1 : 0];
        }
      "
    />
  </ClientOnly>
  <!-- ui.icon.active -->
</template>

<style></style>
